<template>
  <div class="task-status">
    <el-card v-if="task">
      <template #header>
        <div class="card-header">
          <span>任务状态</span>
          <el-tag :type="getStatusColor(task.status)">
            {{ getStatusText(task.status) }}
          </el-tag>
        </div>
      </template>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="任务ID">
          {{ task.taskId }}
        </el-descriptions-item>
        <el-descriptions-item label="数据库类型">
          {{ task.dbType }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ formatTime(task.createdAt) }}
        </el-descriptions-item>
        <el-descriptions-item label="更新时间">
          {{ formatTime(task.updatedAt) }}
        </el-descriptions-item>
      </el-descriptions>

      <div v-if="task.errorMessage" class="error-message">
        <el-alert
          :title="`错误信息: ${task.errorMessage}`"
          type="error"
          show-icon
          :closable="false"
        />
      </div>

      <div class="action-buttons">
        <el-button v-if="task.status === 'success'" type="primary" @click="$emit('view-result')">
          查看文档
        </el-button>
        <el-button v-if="task.status === 'success'" @click="$emit('export', 'md')">
          导出Markdown（推荐）
        </el-button>
        <el-button v-if="task.status === 'success'" @click="$emit('export', 'html')">
          导出HTML
        </el-button>
        <el-button type="danger" @click="$emit('delete')"> 删除任务 </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import type { DocumentTask } from '@/types/document'
import { getStatusText, getStatusColor, formatTime } from '@/utils/task'

interface Props {
  task: DocumentTask | null
}

interface Emits {
  (e: 'view-result'): void
  (e: 'export', format: 'html' | 'md'): void
  (e: 'delete'): void
}

defineProps<Props>()
defineEmits<Emits>()

defineExpose({
  getStatusText,
  getStatusColor,
  formatTime,
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.error-message {
  margin-top: 16px;
}

.action-buttons {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
</style>
